<template>
    <div>
        <div class="box">
        <div class="boxtop"> 
            <backcon></backcon>
            <p>{{arr.title}}</p>
        </div>
        <div class="mainpic"><img :src="arr.image" alt=""></div>
        
         <!-- <video autoplay controls>
                <source :src="video.videoUrl" type="video/mp4"> 
        </video> -->
        <div>
            <p>【{{arr.title}}】</p>
            <div v-for="(v,i) in introduces" :key="i" class="content">
                <div v-html="v.introduce" class="part">{{v.introduce}}</div>
            </div>
        </div>
        </div>
    </div>
</template>
<script>
import backcon from '../../backcon.vue'
export default {
    components:{backcon},
    data() {
        return {
            courseId:0,
            arr:[],
            video:'',
            introduces:[]
        }
    },
    watch: {
    // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
    '$route': 'getParams'
    },
    created(){
         this.getParams();
         this.xiangqing()
    },
    activated:function(){
    this.getParams();
    this.xiangqing();
    },
    methods:{
        xiangqing:function(){
            this.axios({
                url:"https://api.hongbeibang.com/education/getStartClassByNewbie?_t=1584882422909&csrfToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOjAsImV4cCI6MTc3MTU2NjMxNCwiaWF0IjoxNTgyMTc3NTE0fQ.iBmGtQ0fasTTaSuApywmN6Ms0aNYwUvkGLoXX6V6hO8",
                method:"get",
                params: {
                    educationCourseId:this.courseId
                }
            }).then((ok)=>{
                this.arr=ok.data.data
                this.video=this.arr.step[0]
                this.introduces=this.arr.introduces
                window.console.log(this.arr)
                window.console.log(this.video)
            })
        },
         getParams:function(){
            // 取到路由带过来的参数
            var courseId= this.$route.query.courseId;
            // 将数据放在当前组件的数据内
            this.courseId = courseId
            window.console.log(this.courseId)
      },
    }
}
</script>
<style scoped>
.box{width: 90%;margin: .2rem auto;overflow: hidden}
.box img{width: 100%}
.boxtop{display: flex;align-items: center}
.boxtop p{width: 100%;text-align: center;font-size: .2rem;font-weight: bold}
    video{width: 100%}
    .mainpic{width: 100%}
    .mainpic img{width: 100%}
    .content{width: 100%}
    .part{width: 100%}
</style>